<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>警告框</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="alert alert-success" role="alert">
            <strong>Success!</strong>恭喜你成功了！
        </div>
        <div class="alert alert-info" role="alert">
            <strong>Success!</strong>恭喜你成功了！
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>Success!</strong>恭喜你成功了！
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>Success!</strong>恭喜你成功了！
        </div>

        <br/>
        <br/>
        <!--可关闭的警告框-->
        <div class="alert alert-danger alert-dismissable" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>危险，请注意，这是一个危险的动作</strong>
        </div>
        <br/>
        <div class="alert alert-danger" role="alert">
            其实我想知道你在做啥<a href="#" class="alert-link">Hello,how are you</a>
        </div>
        <div class="alert alert-info" role="alert">
            其实我想知道你在做啥<a href="#" class="alert-link">Hello,how are you</a>
        </div>
        <div class="alert alert-warning" role="alert">
            其实我想知道你在做啥<a href="#" class="alert-link">Hello,how are you</a>
        </div>
    </div>
    <script src="jquery-1.11.1.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>